<template>
  <div style="margin:30px">
    <h3>举报信息</h3>
    <el-row style="border: 1px solid  #e1e8ef; border-bottom: 0px solid">
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="left-l grid-content bg-purple">机构名称</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">学而思</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">培训类型</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">学科</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">教师姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">关羽</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">举报类型</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">违规招生</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">人数</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">30</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">所在班级</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">1.5</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple">举报标题</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple">机构A涉及违规收费</div>
      </el-col>
    </el-row>

    <el-row class="totality" style="border: 1px solid  #e1e8ef;">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple" style="height: 160px">举报内容</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple" style="border-bottom: 0px solid #e1e8ef;">我们在培训过程中发现，学而思网校涉及违规收费现象，针对同一门学科，存在多收费，变相收费等问题，严重损害了我们家长及孩子的消费权益。现将相关凭证发票、流水单据等图文资料上传给你们，希望有关部门可以针对此类现象进行严密审查，还我们消费者一个公道。</div>
      </el-col>
    </el-row>

    <el-row class="totality" style="height: 200px">
      <el-col  :span="4" style="height: 100%">
        <div class="left-l grid-content bg-purple" style="height: 100%">附件内容</div>
      </el-col>
      <el-col :span="20">
        <div style="border-bottom: 0px solid" class="right-r grid-content bg-purple">
          <img style="width: 20%;" src="../../assets/img/inform/发票1.png"><img style="width: 20%;" src="../../assets/img/inform/发票2.png">
        </div>
      </el-col>
    </el-row>

    <h3>举报人信息</h3>

    <el-row style="border: 1px solid  #e1e8ef; border-bottom: 0px solid">
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="left-l grid-content bg-purple">姓名</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">王鑫</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">电话</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">18319675427</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">身份证号</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">410978189723781789</div>
          </el-col>
        </el-row>
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">邮箱</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">26893678349@qq.com</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <h3>核实信息</h3>

    <el-form v-if="this.$route.params.id === 'D'" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="是否属实" prop="field_shifoushushi">
        <el-radio-group v-model="formData.field_shifoushushi" size="medium">
          <el-radio v-for="(item, index) in field_shifoushushiOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="核实建议" prop="field_heshi">
        <el-input v-model="formData.field_heshi" type="textarea" placeholder="请输入核实建议"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row v-if="this.$route.params.id === 'W'" style="border: 1px solid  #e1e8ef; border-bottom: 0px solid">
      <el-col :span="12">
        <el-row class="totality">
          <el-col  :span="8">
            <div class="left-l grid-content bg-purple">是否属实</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">是</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="totality">
          <el-col :span="8">
            <div class="left-l grid-content bg-purple">核实人</div>
          </el-col>
          <el-col :span="16">
            <div class="right-r grid-content bg-purple">张飞</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple">核实时间</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple">2021年9月25日13:11:47</div>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality">
      <el-col  :span="4">
        <div class="left-l grid-content bg-purple">核实建议</div>
      </el-col>
      <el-col :span="20">
        <div class="right-r grid-content bg-purple">建议具体情况具体分析多方位调查</div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="4">
        <el-button v-if="this.$route.params.id === 'D'"   type="primary" @click="open()">通过</el-button>
        <el-button type="primary" @click="$router.push({ name: 'inform' })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>

    </el-row>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        formData: {
          field_shifoushushi: undefined,
          field_heshi: undefined,
        },
        rules: {
          field_shifoushushi: [{
            required: true,
            message: '是否属实不能为空',
            trigger: 'change'
          }],
          field_heshi: [{
            required: true,
            message: '请输入核实建议',
            trigger: 'blur'
          }],
        },
        field_shifoushushiOptions: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 2
        }],
        type: 'D',
        txtVal: 0,
        // type: this.$route.params.type
      }
    },
    computed: {},
    created() {
      console.log('监听路由',this.$route.params)
      this.type = this.$route.params.id
      // console.log(type)
    },
    methods: {
      open() {
        const imga = require("../../assets/img/审批完成2.png");
        this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false
        });
      },
      openText() {
        this.$alert('<textarea class="textarea_border" v-model="formData.field101" rows="15" cols="50" maxlength="500" @input="descInput" placeholder="请输入拒绝原因" ></textarea> <span class="numberV" style="position: absolute; right: 15px;bottom: 2px;">' + this.txtVal + '/500</span>', '原因', {
          dangerouslyUseHTMLString: true,
          cancelButtonClass: "el-confirm"
        });
      },
      field104BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
    }
  }
</script>
<style>
  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;

  }
</style>
